常用标签

章节标签

  • <body>标签：是整个文档的容器，文档章节内容相关的标签都会包含在 body 中
  • <header>标签：页面头部标签，可以参见下图
  • <footer>标签：页面底部标签，可以参见下图
  • <nav>标签：导航，可以参考下图
  • <aside>标签：和主要内容不相关的区域插入的广告，一些工具性的内容
  • <article>标签：独立的可重复的结构，论坛的帖子文章等等
  • <section>标签：表示文档中的一节，一般来说 section 会带一个标题
  • h1-h6 标签：标题标签，从 1-6 依次变小

文本标签

超链接标签 a

超链接标签有很多用途，最常用的有三种，详情可以点击【HTML a 标签】：

用途一：创建指向另一个文档的连接

1
<a href="http://jackie-anxis.com/" target="_self">叫Jackie的咸鱼</a>

href 是目标地址，target 是跳转方式，默认是_self(在本页面显示), _blank(在新的窗口显示), 或者是一个名称(会在对应名称的 iframe 标签下显示)，比如这样：

1
2
<a href="http://jackie-anxis.com/" target="123">Jackie</a>
<iframe src="" name="123" style="display:block; width:500px"></iframe>

用途二：创建一个文档内部的锚点(跳转到页面中的其他地方)

1
2
<a href="#bottom" style="display: block;">Jackie</a>
<iframe id="bottom" src="www.jackie-anxis.com" style="margin: 400px 0"></iframe>


(这样点击之后，会跳转到 id=”bottom”这个地方) 地址栏会多一个#bottom

用途三：链接到 Email 地址/电话号码，会直接打开邮箱的客户端

1
2
3
4
发送邮件：<a href="mailto:yixinplus@188.com">联系我们</a>
拨打电话：<a href="tel:1321321321">31243234</a>
还可以直接写上主题和抄送：
<a href="mailto:xx@xx.com?cc=yy@yy.com&subject=建议&body=body...">联系我们(抄送)</a>

强调标签 em strong

<em>标签和<strong>标签都可以表示强调，但不同的是：
<em>标签表示斜体
<strong>标签表示粗体

行内容器 span

事实上，它就是一个非常普普通通的标签，默认是不换行的，可以用来组合行内元素，比如：
提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。
假如你需要把提示两个字变成红色，那么可以写成这样：

1
<p><span style="color:red">提示：</span>请使用 span 来组合行内元素，以便通过样式来格式化它们</p>

最终效果就会是：

提示：请使用 span 来组合行内元素，以便通过样式来格式化它们

换行 br

就是换行

引用 cite q

用途一：cite 用来表示一个引用的出处，比如作品名称或人物

1
<p>决心不过是记忆的奴隶它会根据你的记忆随意更改——<cite>《哈姆雷特》</cite></p>

效果：

决心不过是记忆的奴隶它会根据你的记忆随意更改——《哈姆雷特》

用途二：q 作品中的一段文字，某人说的话

1
<p>莎士比亚说：<q>我抽烟,喝酒,有纹身,但我知道我是好女孩。</q></p>

效果：

莎士比亚说：我抽烟,喝酒, 有纹身,但我知道我是好女孩。


显然，你可以和明确的看到，cite其实也就是斜体罢了，而q则只是为这句话加上了引号。

代码 code

只是说明，如果有代码的话，套在这个标签里面会更优雅。而且，这个标签会自动把你的代码字体改成等宽字体，以暗示：对，你不用怀疑，这是一段代码。后面我们会讲到，这样写符合语义化标准。

强调 b i

这个和<em> <strong>非常像，<b>标签表示加粗，<i>标签表示斜体，只不过在 HTML5 的标准中，推荐使用<em> <strong>。